<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="800" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" @validateFields="handleOk" ref="formRef" layout="vertical" class="common-modal-content">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('deviceManage.clientName')" name="name" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseInputClientName') }]">
              <a-input v-model:value.trim="formState.name" :placeholder="$t('deviceManage.pleaseInputClientName')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('deviceManage.ipAddr')" name="ipAddr" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseInputIpAddr') }]">
              <a-input v-model:value.trim="formState.ipAddr" :placeholder="$t('deviceManage.pleaseInputIpAddr')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('deviceManage.clientType')" name="type" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('other.pleaseSelectClientInfo') }]">
              <a-select v-model:value="formState.type" allowClear :options="selectOptions.clientTypeArray" :placeholder="$t('common.pleaseSelect')"></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('deviceManage.point')" name="port" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseInputPoint') }]">
              <a-input v-model:value.trim="formState.port" :placeholder="$t('deviceManage.pleaseInputPoint')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('deviceManage.waterLineNo')" name="hangerLineIdList" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseSelectWaterLineNo') }]">
              <a-select v-model:value="formState.hangerLineIdList" :placeholder="$t('common.pleaseSelect')" mode="multiple">
                <a-select-option v-for="item in selectOptions.waterList" :key="item" :value="item.id">{{
                    item.lineNo
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label="$t('common.remark')" name="remark" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <a-textarea v-model:value.trim="formState.remark" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('common.startState')" name="status" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('sysManage.selectEnable') }]">
              <a-radio-group v-model:value="formState.status">
                <a-radio v-for="(item,index) in selectOptions.status" :value="item.value" :key="index">
                  {{ item.label }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="addDialog">
import { nextTick, ref } from 'vue'
import i18n from '@/locales/index'
const { t } = i18n.global
// import { uploadUrl } from '@/api/commonApi'
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
// import { beforeImgUpload } from '@/utils'
const emits = defineEmits(['ok'])
const labelCol = { span: 23 }
const wrapperCol = { span: 23 }
const labelCol1 = { xs: { span: 24 }, sm: { span: 3 } }
const wrapperCol1 = { xs: { span: 24 }, sm: { span: 20 } }
let title = ref('')
let visible = ref(false)
let isEdit = ref(false)
let confirmLoading = ref(false)
const selectOptions = ref({})
let recordInfo = ref({})
let formState = ref({})
const formRef = ref()
let partNameList = ref([])
let fileList = ref([])

const edit = async (record, editable) => {
  initModalData(record, editable)
  await nextTick()
  formRef.value.resetFields()
  // console.log(record)
  if (!record.id) {
    record.status = 0;
  }
  formState.value = cloneDeep(record)
}
const initModalData = (record, editable) => {
  title.value = t('other.addClient')
  recordInfo.value = Object.assign({}, record)
  visible.value = true
  isEdit.value = editable
}
const queryParams = (value) => {
  const params = cloneDeep(value)
  params.url = fileList.value.length ? fileList.value[0].response ? fileList.value[0].response.data : fileList.value[0].url : null
  params.id = recordInfo.value.id
  params.productPartNameList = partNameList.value.filter(item => item.name).map(item => item.name)
  return params
}
const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields()
    confirmLoading.value = true
    const res = await axios.postAction('/api/device/client/save', queryParams(values))
    if (res.success) {
      emits('ok')
      confirmLoading.value = false // 刷新
      visible.value = false
    }
  } catch (err) {
    console.log('0000000', err)
  }
  confirmLoading.value = false
}
const handleCancel = () => {
  visible.value = false
  initModalStatus()
}
const initModalStatus = () => {
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
  fileList.value = []
}

const initSelectOptions = (obj) => {
  selectOptions.value = obj
}
defineExpose({
  edit,
  initSelectOptions
})

</script>
